import { useEffect, useState } from 'react';
import styles from './index.module.less';
import SearchForm from './components/serchForm';
import { Button, Form, Modal, Table } from 'antd';
import { getOrderList, delOrder } from '../../services/order';
import { appointTimeMap, platformMap } from './config';

const Index = () => {
  const [form] = Form.useForm();
  const [dataSource, setDataSource] = useState([]);
  const [loading, setLoading] = useState(false);
    
  const columns = [
    {
      title: '订票日期',
      dataIndex: 'appointDate',
      key: 'appointDate',
    },
    {
      title: '订票时段',
      dataIndex: 'appointTime',
      key: 'appointTime',
      render: (text: number) => appointTimeMap[text],
    },
    {
      title: '平台',
      dataIndex: 'platform',
      key: 'platform',
      render: (text: number) => platformMap[text],
    },
    {
      title: '下单用户',
      dataIndex: 'createUser',
      key: 'createUser',
    },
    {
      title: '游客信息',
      dataIndex: 'touristInfo',
      key: 'touristInfo',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      render: (_t: any, row: any) => (
        <Button onClick={() => handlerDelOrder(row.id)} type='link'>删除订单</Button>
      )
    },
  ];

  const handlerDelOrder = (id: number) => {
    Modal.confirm({
      title: '删除订单',
      content: '是否确认删除',
      okText: '确认',
      cancelText: '取消',
      onOk: async () => {
        try {
          await delOrder({ id });
          handlerSearch();
        } catch (error) {
          console.log(error);
        }
      },
    });
  };

  const queryList = async (page: number) => {
    setLoading(true);
    const data = form.getFieldsValue();
    try {
      const res = await getOrderList({ ...data, page });
      if (res.data.code === 200) {
        setDataSource(res.data.data.rows);
        // setTotal(res.data.total);
      }
    } catch (error) {
      
    }
    setLoading(false);
  };

  const handlerSearch = () => {
    queryList(1);
  }

  useEffect(() => {
    handlerSearch();
  }, []);

  return (
    <div className={styles.container}>
      <SearchForm form={form} onSearch={handlerSearch} />
      <div className={styles.table}>
        <Table
          loading={loading}
          dataSource={dataSource}
          columns={columns}
        />
      </div> 
    </div>
  );
};

export default Index;
